import { getListApi } from "@/api/user";
import { ListUserParam } from "@/api/user/UserModel";

import { nextTick, onMounted, ref } from "vue";
import { reactive } from "vue";


//表格相关业务的抽离
export default function useUserTable() {
    //表格高度
    const tableHeight =ref(0)
   
    //列表查询的参数
    const listParam = reactive<ListUserParam>({
        currentPage: 1,
        pageSize: 10,
        name: '',
        phone: '',
        total:0
    })
    //接受表格数据
    const tableList = ref([])
    //列表
    const getList =async () => {
        let res = await getListApi(listParam);
        console.log(res)
        if (res && res.code == 200) {
            tableList.value = res.data.records;
            listParam.total=res.data.total
        }
    }
 
    //搜索
    const searchBtn = () => {
        getList()
    }
    //重置
    const resetBtn = () => {
        listParam.currentPage = 1;
        listParam.name = ''
        listParam.phone = ''
        getList()
    }
    //页容量改变时触发
    const sizeChange = (size:number) => {
        listParam.pageSize = size;
        getList()
    }
    //页数改变时候触发
    const currentChange = (page:number) => {
        listParam.currentPage = page
        getList()
    }
    onMounted(() => {
        getList()
        //计算表格的高度
        nextTick(() => {
            tableHeight.value=window.innerHeight-220
        })
    })
    return {
        listParam,
        searchBtn,
        resetBtn,
        getList, 
        tableList,
        sizeChange,
        currentChange,
        tableHeight
    }
}
